<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>背景</title>

        <style type="text/css">
            body { margin: 0 ; padding: 0; }
            .odd { height: 500px ; background-color: #FFFFFF ; }
            .even { height: 500px ; background-color: #FFFF00 ; text-align: center ; }

            .first {
                background-image: url( '/images/bg1.jpg' ) ;
                background-position: center ;
                background-size: cover ;
                /* scroll | fixed | local */
                background-attachment: fixed ; /* fixed 表示 图片不随元素滚动而滚动，而是参照当前视口固定 */
            }
            .second {
                background-image: url( '/images/bg2.jpg' ) ;
                background-position: center ;
                background-size: cover ;
                background-attachment: fixed ; /* fixed 表示 图片不随元素滚动而滚动，而是参照当前视口固定 */
            }
            .third {
                background-image: url( '/images/bg3.jpg' ) ;
                background-position: center ;
                background-size: cover ;
                background-attachment: fixed ; /* fixed 表示 图片不随元素滚动而滚动，而是参照当前视口固定 */
            }
        </style>

    </head>

    <body>

        <div class="odd"></div>

        <div class="even first">first</div>

        <div class="odd"></div>

        <div class="even second">second</div>

        <div class="odd"></div>

        <div class="even third">third</div>

        <div class="odd"></div>
        
    </body>
</html>